<template>
    <div class="app-container">
        <!-- 链接类型 -->
        <el-row :gutter="24" style="color: #999;" class="mb15 p0">
            <el-col :span="1.5" :class="isActive('all')" @click.native="changeStatus('all')">
                全部
            </el-col>
            <el-col :span="1.5" :class="isActive('friend')" @click.native="changeStatus('friend')">
                友链
            </el-col>
            <el-col :span="1.5" :class="isActive('out')" @click.native="changeStatus('out')">
                外链
            </el-col>
            <el-col :span="1.5" :class="isActive('tech')" @click.native="changeStatus('tech')">
                技术链接
            </el-col>
        </el-row>
        <!-- 搜索栏 -->
        <el-form @submit.native.prevent :model="queryParams" :inline="true" v-show="showSearch">
            <el-form-item label="链接名称">
                <el-input @keyup.enter="handleQuery" v-model="queryParams.keyword" style="width: 200px"
                    placeholder="请输入链接名称" clearable />
            </el-form-item>
              <el-form-item label="链接类型">
                <el-select v-model="queryParams.typeId" placeholder="请选择类型" clearable style="width: 130px;">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 操作按钮 -->
        <el-row :gutter="10" class="mb15 mt-0">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="openModel(undefined)">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain :disabled="linkIdList.length === 0" icon="Delete"
                    @click="handleDelete(undefined)">批量删除</el-button>
            </el-col>
          <RightToolBar @changeShow="changeShowSearch" :showSearch="showSearch" @queryTable="getList"></RightToolBar>
        </el-row>
        <!-- 表格展示 -->
        <el-table border :data="friendList" @selection-change="handleSelectionChange" v-loading="loading">
            <!-- 表格列 -->
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <!-- 链接头像 -->
            <el-table-column prop="avatar" label="链接头像" align="center" width="100">
                <template #default="scope">
                    <img :src="scope.row.avatar" v-if="scope.row.avatar" width="40" height="40" />
                </template>
            </el-table-column>
            <!-- 链接颜色 -->
            <el-table-column prop="color" label="链接颜色" align="center" width="100">
                 <template #default="scope">
                    <el-color-picker disabled v-model="scope.row.color" size="medium" ></el-color-picker>
                </template>
            </el-table-column>
            <!-- 链接名称 -->
            <el-table-column prop="name" label="链接名称" align="center" :show-overflow-tooltip="true"
                width="180"></el-table-column>
            <!-- 链接地址 -->
            <el-table-column prop="url" label="链接地址" align="center" width="220"></el-table-column>
            <!-- 链接介绍 -->
            <el-table-column prop="introduction" label="链接介绍" align="center"
                :show-overflow-tooltip="true"></el-table-column>
            <!--链接类型-->
            <el-table-column prop="type" label="类型" width="100" align="center">
                <template #default="scope">
                    <el-tag v-if="scope.row.type == 0" type="success">外链</el-tag>
                    <el-tag v-if="scope.row.type == 1" type="danger">友链</el-tag>
                    <el-tag v-if="scope.row.type == 2" type="primary">技术栈链</el-tag>
                </template>
            </el-table-column>
            <!-- 创建时间 -->
            <el-table-column prop="createTime" label="创建时间" align="center" width="140">
                <template #default="scope">
                    <div class="create-time">
                        <el-icon>
                            <clock />
                        </el-icon>
                        <span style="margin-left: 10px">{{ formattedDate(scope.row.createTime) }}</span>
                    </div>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" align="center" width="250">
                <template #default="scope">
                    <el-button type="primary" class="el-icon-edit" size="mini" plain @click="openModel(scope.row)">
                        编辑
                    </el-button>
                    <el-button type="danger" class="el-icon-delete" size="mini" plain @click="handleDelete(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
          <Pagination
      :total="count"   
      :page.sync="queryParams.current" 
      :limit.sync="queryParams.size"     
      @pagination="getList" 
    />
        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="addOrUpdate" width="450px" append-to-body>
            <el-form ref="linkFormRef" label-width="100px" :model="linkForm" :rules="rules" @submit.native.prevent>
                <el-form-item label="链接名称" prop="name">
                    <el-input placeholder="请输入链接名称" v-model="linkForm.name" style="width: 250px;" />
                </el-form-item>
                <el-form-item label="链接类型"  prop="type">
                <el-select v-model="linkForm.type"  :rules="rules" placeholder="请选择类型" clearable style="width: 130px;">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="链接颜色" v-if="linkForm.type == 1" prop="color">
                    <el-color-picker v-model="linkForm.color"></el-color-picker>
                </el-form-item>
                <el-form-item label="链接头像" v-if="linkForm.type == 1" prop="avatar">
                    <el-input placeholder="请输入链接头像" v-model="linkForm.avatar" style="width: 250px;" />
                </el-form-item>
                <el-form-item label="链接地址" prop="url">
                    <el-input placeholder="请输入链接地址" v-model="linkForm.url" style="width: 250px;" />
                </el-form-item>
                <el-form-item label="链接介绍" v-if="linkForm.type == 1" prop="introduction">
                    <el-input placeholder="请输入链接介绍" v-model="linkForm.introduction" style="width: 250px;" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="addOrUpdate = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import {getLinkList,deleteLink, addLink, updateLink} from '@/api/link'
export default {
  data() {
    return {
      count: 0,
      showSearch: true,
      loading: false,
      title: "",
      addOrUpdate: false,
      queryParams: {
          current: 1,
          size: 10,
          typeId: undefined,
          keyword: undefined,
      },
      linkForm: {
          id: undefined,
          color: "#409EFF",
          name: "",
          avatar: "",
          url: "",
          introduction: "",
          type:undefined,
      },
      linkIdList: [],
      friendList: [],
      typeList: [
        {
            value: 0,
            label: "外链",
        },
        {
            value: 1,
            label: "友链",
        },
        {
            value: 2,
            label: "技术链接",
        },
    ],
    typeId: undefined,
    activeStatus:'all',
      rules:{
      name:{required: true, message: '请输入链接名称！', trigger: 'blur'},
      type:{required: true, message: '必须选择链接类型！', trigger: 'blur'},
      url:{required: true, message: '请输入链接地址！', trigger: 'blur'},
    },
    }
  },
  methods: {
    getList(){
      this.loading = true;
      getLinkList(this.queryParams).then((res) => {
        if(res.code == 200)
        {
          this.friendList = res.data.recordList;
          this.count = res.data.count;
          this.loading = false;
        }
      });
    },
    handleQuery(){
        this.getList();
    },
    handleSelectionChange(selectedItems){
        this.linkIdList = selectedItems.map((item) => item.id);
    },
    queryTable(){},
    submitForm(){
        this.$refs.linkFormRef.validate((valid) => {
            if (valid) {
                  if(this.linkForm.type != 1){
                    this.linkForm.color = "";
                    this.linkForm.avatar = "";
                    this.linkForm.introduction = "";
                }
            if(this.linkForm.id){
              
                updateLink(this.linkForm).then((res) => {
                if(res.code == 200){
                    this.$message.success("修改成功");
                    this.addOrUpdate = false;
                    this.getList();
                }
                });
            }else{
                addLink(this.linkForm).then((res) => {
                if(res.code == 200){
                    this.$message.success("添加成功");
                    this.addOrUpdate = false;
                    this.getList();
                }
                });
            }
            } else {
            return false;
            }
        });
    },
    changeShowSearch(data){
      this.showSearch = data;
    },
    formattedDate(date) {
      return formatDate(date);
    },
    openModel(row){
      this.addOrUpdate = true;
      if(row){
        this.title = "编辑链接";
        this.linkForm = row;
      }else{
        this.title = "新增链接";
        this.linkForm = {
          id: undefined,
          color: "#409EFF",
          name: "",
          avatar: "",
          url: "",
          introduction: "",
        }
      }
    },
    isActive(type){
       return this.activeStatus == type ? "active-status" : "status";
    },
    handleDelete(ids){
        if(ids){
            this.linkIdList = [ids];
        }
        if(this.linkIdList.length == 0){
            this.$message.warning("请选择需要删除的链接");
            return;
        }
        this.$confirm("确定删除选中的链接吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            deleteLink(this.linkIdList).then((res) => {
                if(res.code == 200){
                    this.$message.success("删除成功");
                    this.getList();
                    this.linkIdList = []
                }
            });
        });
    },
        //查询状态参数改变
    changeStatus(status){
      if(status == "all"){//查询所有
        this.queryParams.typeId = undefined;
      }
      if(status == "out"){//查询外链
        this.queryParams.typeId = 0;
      }
      if(status == "friend"){//查询友链
       this.queryParams.typeId = 1;
      }
      if(status == "tech"){//查询技术链接
        this.queryParams.typeId = 2;
      }
      this.activeStatus = status;//对应状态高亮
      this.handleQuery();//查询
    },
  },
  mounted(){
    this.getList();
  },
}
</script>

<style>
.mb15 {
    margin-bottom: 15px;
    cursor: pointer;
}

.pd0 {
    padding: 0px;

}
.p0 {
    padding: 0px;
}

.el-form-item {
    margin-bottom: 15px;
}

.active-status {
    cursor: pointer;
    color: #302424;
    font-weight: bold;
    cursor: pointer;
}

.el-row{
    padding-left: 0px;
    padding-right: 15px;
    padding-top: 0px;
}

</style>